<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="../css/myequipment.css">
    <script src="../js/jquery.min.js"></script>    <script src="../js/fontzize.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/choice.js"></script>
    <link href="../css/choice.min.css" rel="stylesheet" type="text/css"/>
    <link href="../css/telregister.css" rel="stylesheet" type="text/css"/>
    <script src="../js/jsonAjax.js"></script>

</head>
<body>
<div id="app">
    <section>
        <div class="logo"><img src="../imgs/logo.png"/>
        </div>

        <dl>
            <dd class="cent"><input type="tel"  placeholder="请输入绑定邮箱" v-model="username"></dd>
        </dl>
        <dl>
            <dt><input type="text" placeholder="请验证码" v-model="Code"></dt>
            <dd class="lef"><input @click="authentication" type="button" v-model="Counttex"  :disabled="disabledSty" :class="{disabled:!disabledSty}"></dd>
        </dl>
        <dl>

            <dd class="cent"><input type="password" placeholder="请输6-20位密码" v-model="password"></dd>
        </dl>
        <dl>
            <dd></dd>
            <dd><span class="span" @click="lodinguplink">已有账户</span></dd>
        </dl>
          <input class="signin" type="button" @click="Submit" value="提交" :disabled="disableSubmit" :class="{signinup:!disableSubmit}">
    </section>
    <div class="popuparticle" v-html="tishi" v-if="tishidisa"></div>
</div>


<script>

    var eml=/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

    Vue.config.debug = true;
    app = new Vue({
        el: "#app",
        data: {
            countryCode: '86',
            Code:'',
            username: '',
            password: '',
            type:0,
            Counttex:'获取验证码',
            disabledSty:true,
            tishidisa:false,
            tishi:""
        },
        mounted: function () {
            var _this = this;
            window.localStorage.setItem('language','zh-cn');
        },
        watch: {
                username: function (val, oldVal) {
                    var tel=/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/;
                    var eml = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    if(eml.test(val)){
                        this.type=2;
                        this.disabledSty=false;
                        return false;
                    }else {
                        this.disabledSty=true;
                        return true;
                    }
            }

        },
        computed:{
            disableSubmit:function () {
                if(this.username.length>4&&this.Code.length>1&&this.password.length>5&&this.password.length<20){
                    return false;
                }else {
                    return true;
                }
            }

        },
        methods: {
            authentication:function () {
                var _this=this;
                _this.disabledSty=true;
                this.Count=60;
                _this.Counttex="重发("+_this.Count+")";
                var settime=setInterval(function() {
                    _this.Count--;
                    _this.Counttex="重发("+_this.Count+")";
                    if(_this.Count<1){
                        _this.disabledSty=false;
                        _this.Counttex="重发";
                        clearInterval(settime);
                    }
                }, 1000);
                //02 发送验证码√
                jsonAjax("/Home/User/sendsafecode",
                    {
                        country_code:_this.countryCode,
                        type:_this.type,
                        username: _this.username,
                        usertype:2
                    }
                ).done(function (data) {
                    console.log(data)
                    if(data.msg == "手机号被占用"){
                        _this.tishidisa=true;
                        _this.tishi="手机号被占用";
                        setTimeout(function () {
                            _this.tishidisa=false;
                        },3000);
                        _this.disabledSty=false;
                        _this.Counttex="获取验证码";
                        clearInterval(settime);
                    }else {
                        _this.tishidisa=true;
                        _this.tishi="验证码已发送";
                        setTimeout(function () {
                            _this.tishidisa=false;
                        },3000);
                    }
                })
                    .fail(function () {
                        console.log("error");
                    });

            },
            Submit: function () {
                var _this = this;
                //03 手机号/邮箱登录√
                jsonAjax("/Home/User/api_forget_password",
                    {
                        country_code:_this.countryCode,
                        password: _this.password,
                        safecode: _this.Code,
                        type:_this.type,
                        username: _this.username
                    }
                ).done(function (data) {
                    if (data.code ==0) {
                        _this.tishidisa=true;
                        _this.tishi="密码设置成功";
                        setTimeout(function () {
                            _this.tishidisa=false;
                        },3000);
                        window.location.href=golinks('weixinsq.html')
                    }
                    else if(data.msg == "验证码错误") {
                        _this.tishidisa=true;
                        _this.tishi="验证码错误";
                        setTimeout(function () {
                            _this.tishidisa=false;
                        },3000);
                    }
                })
                    .fail(function () {
                        console.log("error");
                    });
            },

            emlink:function () {
                window.location.href=golinks('lodings/emlregister.html')
            },
            lodinguplink:function () {
                window.location.href=golinks('weixinsq.html')
            },
            goback: function () {
                var _this = this;

            }
        }

    });

    var datacity = [];
    $('#changCity').choice().scroller({
        theme: 'ios',
        display: 'bottom',
        lang: 'zh',
        onInit: function (event, inst) {
            for (var i = 0; i < app.changCity.length; i++) {
                datacity.push('-' + app.changCity[i].code + '-' + app.changCity[i].country)
            }
        },
        wheels: [
            [{
                data: datacity
            }]
        ],
        onSet: function (event, inst) {
            app.countryCode = inst._value.replace(/[^0-9]/ig, "");
            app.username='';

        }
    });

</script>
</body>
</html>